<template>
  <!-- <van-pull-refresh v-model="isLoading"> -->
  <div class="homes">
    <!-- 轮播图 -->
    <div class="yuan">
      <div v-cloak>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="getBanners in getBannerList" :key="getBanners.index">
            <img :src="getBanners" alt>
          </van-swipe-item>
        </van-swipe>
      </div>
      <img class="picBgHome" src="../../assets/images/picHome.png" alt>
    </div>
    <!-- 活动 -->
    <div class="flex activity">
      <div class="activity-l">
        <router-link :to="{name:''}" class="luckDraw">
          <div class="flex link-l">
            <div class="link-lt">
              <div class="link-lt-big">FBP权益</div>
              <div class="link-lt-small">每周福利</div>
            </div>
            <div style="width:26%" class="fl iconb">
              <van-icon>
                <img style="width:100%" src="../../assets/images/background-coin.png" alt>
              </van-icon>
            </div>
          </div>
        </router-link>
      </div>
      <div class="activity-r">
        <router-link to="" class="experiencesGold">
          <div class="flex link-l">
            <div class="link-lt">
              <div class="link-lt-big">1BTC秒到账</div>
              <div class="link-lt-small">体验高息稳定收益</div>
            </div>
            <div class="fl iconb" style="width:26%;margin-right:10px;">
              <van-icon>
                <img style="width:70%" src="../../assets/images/background-enter.png" alt>
              </van-icon>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <!-- 广告位 -->
    <div class="adv">
        <div class="adv-left">
            <p>定期很"稳"</p>
            <p>币友拼团得<span>12%</span>收益</p>
        </div>
        <div class="adv-right">
            <img style="width:70%" src="../../assets/images/background-people.png" alt>
        </div>
    </div>
    <!-- 卡片 -->
    <div v-cloak>
      <van-swipe :show-indicators="false" :loop="false">
        <van-swipe-item v-for="(item,index) in coinPlanShows" :key="index">
          <div class="car-box clearfix">
            <div class="fl tag clearfix">
              <van-tag plain color="#f2826a" size="medium">{{item.virtualWalletName}}</van-tag>
            </div>
            <div class="fl bonus-box clearfix">
              <div class="flex bonus">
                <div class="bonus-items">
                  <div class="big-num">
                    {{item.listCoinPlan[0].annualInterestRate*1000}}
                    <span>%</span>
                  </div>
                  <div class="expect">预期年化利率</div>
                </div>
                <div class="bonus-items bonus-items-two">
                  <div class="big-num">
                    {{item.listCoinPlan[0].lockedDays}}
                    <span>天</span>
                  </div>
                  <div class="expect">锁定期</div>
                </div>
              </div>
            </div>
            <van-button
              @click="goBuy(
                item.listCoinPlan[0].annualInterestRate,
                item.listCoinPlan[0].lockedDays,
                item.virtualWalletName,
                item.listCoinPlan[0].remainingDays,
                item.listCoinPlan[0].minAmount,
                item.listCoinPlan[0].virtualWalletId,
                item.listCoinPlan[0].maxDays,
                item.listCoinPlan[0].remainingAmount,
                item.listCoinPlan[0].planName,
                item.listCoinPlan[0].coinPlanId,)"
              type="warning"
              block
              class="btn"
            >体验</van-button>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 如何获取收益 -->
    <div class="profit">
      <div class="profit-title">如何获取收益</div>
      <div class="flex profit-list">
        <div class="profit-item">
          <div class="profit-icons">
            <van-icon>
              <img style="width:45%" src="../../assets/images/icon-quantization.png" alt>
            </van-icon>
          </div>
          <div class="profit-text">量化套利</div>
        </div>
        <div class="profit-item">
          <div class="profit-icons">
            <van-icon>
              <img style="width:45%" src="../../assets/images/icon-mortgage.png" alt>
            </van-icon>
          </div>
          <div class="profit-text">抵押借贷</div>
        </div>
        <div class="profit-item">
          <div class="profit-icons">
            <van-icon>
              <img style="width:45%" src="../../assets/images/icon-machine.png" alt>
            </van-icon>
          </div>
          <div class="profit-text">矿机矿池</div>
        </div>
        <div class="profit-item">
          <div class="profit-icons">
            <van-icon name="ellipsis"></van-icon>
          </div>
          <div class="profit-text">持续扩展</div>
        </div>
      </div>
    </div>
    <!-- 我们的优势 -->
    <div class="advantage">
      <div class="advantage-title">我们的优势</div>
      <div class="advantage-list">
        <div class="advantage-item">
          <div class="advantage-icon">
            <van-icon>
              <img style="width:100%" src="../../assets/images/icon-capital.png" alt>
            </van-icon>
          </div>
          <div class="advantage-con">
            <p class="title">资金安全</p>
            <p class="cont">冷热分离存储，HSM银行级安全防护，第三方专业机构托管</p>
          </div>
        </div>
        <div class="advantage-item">
          <div class="advantage-icon">
            <van-icon>
              <img style="width:100%" src="../../assets/images/icon-select.png" alt>
            </van-icon>
          </div>
          <div class="advantage-con">
            <p class="title">优选资产</p>
            <p class="cont">1年以上底层资产，平台自由资金实测，持续追踪评级</p>
          </div>
        </div>
        <div class="advantage-item">
          <div class="advantage-icon">
            <van-icon>
              <img style="width:100%" src="../../assets/images/icon-Investment.png" alt>
            </van-icon>
          </div>
          <div class="advantage-con">
            <p class="title">投资保障</p>
            <p class="cont">承诺5%管理规模备付准备金，首期为52BTC</p>
          </div>
        </div>
        <div class="advantage-item">
          <div class="advantage-icon">
            <van-icon>
              <img style="width:100%" src="../../assets/images/icon-risks.png" alt>
            </van-icon>
          </div>
          <div class="advantage-con">
            <p class="title">风险控制</p>
            <p class="cont">全平台风控引擎，风险自动预警，团队7/24h待命</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </van-pull-refresh> -->
</template>
<script>
import {
  Swipe,
  SwipeItem,
  Row,
  Col,
  Tag,
  Button,
  Icon,
  PullRefresh,
  List
} from "vant";
import vue from "vue";
import axios from "axios";
import { getBanner, coinPlanShow } from "../../axios/api.js";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List
  },
  data() {
    return {
      isLoading: false,
      getBannerList: [],
      coinPlanShows: [],
      data: {
        page: "1",
        rows: "5"
      },
      numOne: []
    };
  },
  created() {
    getBanner({
      params: this.data
    }).then(res => {
      console.log(res.data.data);
      this.getBannerList = res.data.data;
    });
    coinPlanShow().then(res => {
      this.coinPlanShows = res.data.data;
      console.log(this.coinPlanShows);
    });
  },
  methods: {
    //购买跳转
    goBuy(one, two,three,four,five,six,seven,eight,nine,ten) {
      this.$router.push({
        path: "/planDetails",
        query: {
          annualInterestRate: one,
          lockedDays: two,
          virtualWalletName:three,
          name:four,
          minAmount:five,
          id:six,
          name2:seven,
          moreNum:eight,
          productName:nine,
          prodId:ten
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/less/variable.less";
// 修改swiper dot默认样式
/deep/ .van-swipe__indicator {
  border-radius: 0;
  width: 20px;
  height: 4px;
  background-color: rgb(0, 0, 0);
  opacity: 0.1;
}
/deep/ .van-swipe__indicator:not(:last-child) {
  margin-right: 0;
}
/deep/ .van-swipe__indicator--active {
  opacity: 0.5;
  background-color: black;
}
[v-cloak] {
  display: none;
}
.yuan {
    position: relative;
    .picBgHome{
        position: absolute;
        left:0;
        bottom: -2px;
        width: 100%;
    }
}
.adv{
    display: flex;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    border-top:10px solid #f6f6f7;
    border-bottom:10px solid #f6f6f7;
    padding: 10px 0 4px;
    >.adv-left{
        width: 50% !important;
        text-align: left;
        padding-left: 30px;
        box-sizing: border-box;
        p:nth-child(1){
            padding-top: 6px;
            width: 100%;
            display: block;
            font-size: 14px;   
        }
        p:nth-child(2){
            display: block;
            font-size: 12px;
            color: #666;
            span{
                color: #d6ab6f;
            }
        }
    }
    >.adv-right{
        width: 50% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.btn {
  border-radius: 30px;
  background-color: #d6ab6f;
  border: 0;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}
.homes {
  height: 100%;
  margin-bottom: 70px;
  background: @base_background;
  overflow: hidden;
  .van-swipe {
    touch-action: none;
    img {
      width: 100%;
      height: 5.33rem;
      display: block;
    }
  }
  .activity {
    width: 100%;
    height: 2rem;
    margin: 10px 0;
    .activity-l,
    .activity-r {
      width: 50%;
      .link-l {
        width: 100%;
        .link-lt {
          margin-right: 10px;
          line-height: 1.5;
          .link-lt-big {
            font-size: @base_textSize;
            color: @base_textColor;
          }
          .link-lt-small {
            font-size: 12px;
            color: #969799f5;
          }
        }
        .iconb {
          font-size: 3em;
          color: #ff976a;
        }
      }
    }
  }
  .car-box {
    width: 80%;
    height: auto;
    margin: 10px auto;
    border-radius: 3px;
    box-shadow: 0 0 6px 2px #ebedf0;
    padding: 10px 10px 20px 10px;
    .tag {
      width: 100%;
      text-align: left;
    }
    .bonus-box {
      width: 100%;
      margin: 0.27rem 0;
      .bonus {
        width: 100%;
        .bonus-items {
          width: 100%;
          div {
            width: 50%;
          }
          .big-num {
            width: 100%;
            font-size: 3em;
            color: #f2826a;
            span {
              font-size: 0.6em;
            }
          }
          .expect {
            width: 100%;
            font-size: 12px;
            color: #969799f5;
          }
        }
        .bonus-items-two {
          .big-num {
            color: @base_textColor;
          }
        }
      }
    }
  }
  .profit {
    width: 100%;
    margin: 10px 0;
    .profit-title {
      padding: 10px 0;
      font-size: @base_textSize;
      color: @base_textColor;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .profit-title:before {
      content: " ";
      display: block;
      height: 20px;
      width: 80px;
      background: url("../../assets/images/icon-rightline.png") no-repeat;
      background-size: 100%;
    }
    .profit-title:after {
      content: " ";
      display: block;
      height: 20px;
      width: 80px;
      background: url("../../assets/images/icon-leftline.png") no-repeat;
      background-size: 100%;
    }
    .profit-list {
      padding: 10px 0;
      .profit-item {
        width: 25%;
        .profit-icons {
          font-size: 3em;
          color: #ff976a;
        }
        .profit-text {
          font-size: @base_textSize;
          color: @base_textColor;
        }
      }
    }
  }
  .advantage {
    width: 100%;
    margin-top: 10px;
    .advantage-title {
      padding: 10px 0;
      font-size: @base_textSize;
      color: @base_textColor;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .advantage-title:before {
      content: " ";
      display: block;
      height: 20px;
      width: 80px;
      background: url("../../assets/images/icon-rightline.png") no-repeat;
      background-size: 100%;
    }
    .advantage-title:after {
      content: " ";
      display: block;
      height: 20px;
      width: 80px;
      background: url("../../assets/images/icon-leftline.png") no-repeat;
      background-size: 100%;
    }
    .advantage-list {
      padding: 10px 15px;
      .advantage-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .advantage-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 0;
        border-bottom: @base_boder;
        .advantage-icon {
          width: 10%;
          margin-right: 10px;
          font-size: 3em;
          color: #ff976a;
          i {
            vertical-align: super;
          }
        }
        .advantage-con {
          width: 90%;
          .title {
            text-align: left;
            font-size: 14px;
            font-weight: bold;
            color: #323233;
          }
          .cont {
            text-align: left;
            font-size: 12px;
            color: #323233;
            margin: 5px 0;
          }
        }
      }
    }
  }
}
</style>

